<template>
  <el-dialog
    v-model="dialogVisible"
    :title="winTitle"
    :close-on-click-modal="false"
    append-to-body
    width="800"
    class="editDialog"
    align-center
  >
    <el-form
      inline
      class="basicForm"
      label-position="right"
      v-model="formObj"
      label-width="100px"
    >
      <el-form-item label="账号" required>
        <el-input v-model="formData.account" :readonly="isEdit"></el-input>
      </el-form-item>
      <el-form-item label="用户姓名" required>
        <el-input v-model="formData.userName"></el-input>
      </el-form-item>
      <br />

      <el-form-item label="用户性别">
        <el-select v-model="formData.sex" class="select">
          <el-option
            v-for="item in formData.sexList"
            :key="item.value"
            :label="item.text"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input v-model="formData.phone"></el-input>
      </el-form-item>
      <br />

      <el-form-item label="身份证号">
        <el-input v-model="formData.idNumber"></el-input>
      </el-form-item>
      <el-form-item label="工号">
        <el-input v-model="formData.jobNumber"></el-input>
      </el-form-item>
      <br />
      <el-form-item label="密码">
        <el-input v-model="formData.passwd"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="dialogVisible = false" auto-insert-space
        >取消</el-button
      >
      <el-button type="primary" @click="onConfirm" auto-insert-space
        >确定</el-button
      >
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineProps } from "vue";

import { ElMessage } from "element-plus";

import { reqUserSave } from "../../utils/requests";

let dialogVisible = ref(false);

// eslint-disable-next-line no-undef,no-unused-vars
const emits = defineEmits(["confirm"]);

let winTitle = ref("");

let formData = ref({
  account: "",
  userName: "",
  sex: "",
  phone: "",
  idNumber: "",
  jobNumber: "",
  id: "",
  passwd: "",
  sexList: [],
});

let isEdit = ref(false);

const openDialog = (rowData, sexList) => {
  dialogVisible.value = true;
  formData.value.sexList = sexList;
  if (!rowData) {
    winTitle.value = "新增";
    formData.value.account = "";
    formData.value.userName = "";
    formData.value.sex = "";
    formData.value.phone = "";
    formData.value.idNumber = "";
    formData.value.jobNumber = "";
    formData.value.id = "";
    formData.value.passwd = "";
    isEdit.value = false;
  } else {
    winTitle.value = "修改";
    formData.value.account = rowData.account;
    formData.value.userName = rowData.userName;
    formData.value.sex = "" + rowData.sex;
    formData.value.phone = rowData.phone;
    formData.value.idNumber = rowData.idNumber;
    formData.value.jobNumber = rowData.jobNumber;
    formData.value.id = rowData.id;
    formData.value.passwd = rowData.passwd;
    isEdit.value = true;
  }
};

const onConfirm = () => {
  reqUserSave({ ...formData.value }).then((data) => {
    emits("confirm");
    ElMessage.success("修改成功");
    dialogVisible.value = false;
  });
};

defineExpose({ openDialog });
</script>

<style scoped lang="scss">
.basicForm,
.selectionForm {
  > * {
    width: calc(50% - 20px);
    margin-right: 20px;

    .selectInput {
      flex: 1;
    }

    :deep(.el-date-editor) {
      width: 100%;
    }
  }

  > .long {
    width: calc(100% - 20px);
    margin-right: 20px;
  }

  .sumUnit {
    .text {
      margin-right: 10px;
    }
  }
}
</style>
